<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain @click="showContactAdd">添加</el-button></el-col>
            <el-col :span="6"><el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
        </el-row>
            <el-table :data="tableData" stripe border style="width: 98%">
            <el-table-column prop="name" label="姓名" width="80" > </el-table-column>
            <el-table-column prop="idcard" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60" align="center"> </el-table-column>
            <el-table-column prop="origin" label="接触来源" width="280"> </el-table-column>
            <el-table-column prop="place" label="隔离地址" width="280"> </el-table-column>
            
            <el-table-column  label="住院日期" width="120" align="center">
                <!-- 当表格列的内容还要显示其他效果时，就需要自定义模板  slot-scope="scope"作用域插槽 -->
                <template slot-scope="scope">  
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    <!-- .row固定写法，表示当前行 -->
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="center"> 
                <el-button plain size="mini" @click="showContactModify" prop="modify">编辑</el-button>
                <el-button type="primary" plain size="mini" @click="showDeIsolation">解除隔离</el-button>
                <el-button type="primary" plain size="mini" @click="showToPatient">转为患者</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1,2,3,4]"
            :page-size="3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="3">
        </el-pagination>

        <el-dialog :title="lettitle" :visible.sync="dialogFormVisible">
           <el-form  :model="form" label-width="120px"  :rules="rules" ref="form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                <el-radio :label="0">女</el-radio>
                <el-radio :label="1">男</el-radio>
                </el-radio-group>
            </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="idcard">
                        <el-input v-model="form.idcard" placeholder="身份证号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input-number v-model="form.age"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="form.phone" placeholder="电话号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接触来源">
                        <el-input v-model="form.origin" placeholder="接触来源"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="隔离地址">
                        <el-input v-model="form.place" placeholder="隔离地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隔离开始时间">
                        <el-date-picker type="date" placeholder="隔离开始时间" v-model="form.date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="住址">
                <el-input v-model="form.adress" placeholder="住址"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="转为患者" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="住院时间" :label-width="formLabelWidth" >
                        <el-date-picker type="date" placeholder="住院时间" v-model="form.hospitaldate" ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="症状" :label-width="formLabelWidth">
                        <el-input v-model="form.server" placeholder="症状"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="治疗医院" :label-width="formLabelWidth">
                        <el-input v-model="form.hospital" placeholder="治疗医院"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否重症" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.severe">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc" rows="4"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
        </el-dialog>
       
    </div>
    
</template>
<script>
import request from '@/utils/request'
export default {
  data(){
    return {
        input: '',
        tableData:null,
        lettitle:"",
        currentPage4: 1,
        value1: '',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        form: {},
        formLabelWidth: '120px',
        rules:{
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'change' }
          ],
            idcard: [
                { required: true, message: '请输入身份证号', trigger: 'blur' },
                { min: 18, max: 18, message: '长度是 18 个字符', trigger: 'change' }
            ],
            phone: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'change' },
                {
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                  message: '请输入正确的手机号码'
                }
            ]
        }
    }
  },
  created(){
    this.fetchData()
  },
  methods:{
    fetchData() {
        request({
            url: '../contact_index.json',
            method: 'get',
        }).then(response =>{
            this.tableData = response.data
        })
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    },
    showContactAdd(){
        //显示对话框
        this.dialogFormVisible = true
        this.lettitle = "添加"
         /*
        * 问题（bug）：
        * 1. 先点击【修改】，会显示数据，然后关闭
        * 2. 然后点击 【添加】，会显示上一次的数据
        * 
        * 解决：将 form 对象的值置为空
        */
        // this.form = {} // 给 form 赋 {} 对象，
        this.form = {
            "name":"",
            "idcard":"",
            "gender":undefined,
            "phone":"",
            "origin":"",
            "adress":"",
            "place":"",
            "date": "",
            "age":undefined
        }
    },
    showContactModify(){
       //第一步：显示对话框
        this.dialogFormVisible = true
        this.lettitle = "修改"
        // 第二步：通过axios发送ajax请求，将数据返回
        request({
            url: '../contact_modify.json',
            method: 'get',
        }).then(response =>{  //第三步将返回的数据回显对话框
            this.form = response.data
        })
    },
    showDeIsolation(){
        this.$confirm('您确定要解除隔离么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    showToPatient(){
        this.dialogFormVisible1 = true
        request({
            url: '../contact_topatient.json',
            method: 'get',
        }).then(response =>{  //第三步将返回的数据回显对话框
            this.form = response.data
        })

    },
    doSubmit() {
        console.log('submit!');
        this.$refs["form"].validate((valid) => {//箭头函数，相当于lamdba表达式
          if (valid) {//形参为true，说明检验通过
            this.$message({
                showClose: true,
                message: '提交成功',
                type: 'success'
        });//演示，真正代码要通过axios发送ajax请求到服务器
          } else {//说明校验没通过
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
}
</script>